﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
</head>

<body>
    <div id="app" v-cloak>
        <el-container class="list_pagecontainer">
            <el-header>
                <el-row>
                    <el-col :span="24">
                        <div class="list_searchcontainer">
                            <el-input placeholder="请输入列名" v-model="fieldName" class="list_searchinput">
                            </el-input>
                            <el-button type="primary" v-on:click="bindGrid" icon="el-icon-search">搜索</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <common-table :data="tableData" :page-Index="pageIndex" :page-Size="pageSize" :total="total"
                    :table-Height="tableHeight" :show-Delete="false" v-on:on-load="bindGrid" v-on:handle-edit="edit"
                    v-on:on-pageindexchange="pageIndexChange" ref="table">
                    <template slot="column">
                        <el-table-column prop="FieldName" label="名称">
                        </el-table-column>
                        <el-table-column prop="SQLFieldName" label="字段" width="280">
                        </el-table-column>
                        <el-table-column prop="FieldType" label="类型" width="100">
                        </el-table-column>
                        <el-table-column prop="FieldLength" label="长度" width="100">
                        </el-table-column>
                        <el-table-column prop="OrderNum" label="排序" width="100">
                        </el-table-column>
                    </template>
                </common-table>
            </el-main>
            <el-footer>
                <el-row>
                    <el-col :span="24">
                        <div class="list_opcontainer">
                            <el-button type="primary" v-on:click="add">添加列</el-button>
                            <el-button type="primary" v-on:click="batchCreateScript">生成同步脚本</el-button>
                            <el-button type="danger" v-on:click="batchDelete">删除选中</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js")
@Scripts.Render("~/Resource/component/tree/index.js")

</html>

<script>
    var tableUrl = GetRootPath() + "Frame/Column/FindList"
    var batchDeletetUrl = GetRootPath() + "Frame/Column/OperateBatchDelete"
    var batchScripttUrl = GetRootPath() + "Frame/Column/CreatColumnAddScript"
    var pageData = {
        //data
        tableData: [],
        //page
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        //search
        fieldName: "",
        //css
        tableHeight: 0,
    };
    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {
            pageData.tableHeight = CaculateTableHeight();
        },
        methods: {
            pageIndexChange: function (val) {
                this.pageIndex = val
            },
            bindGrid: function () {
                bindGrid();
            },
            add: function () {
                OpenTopDialog('columnadd', '添加列', 'Frame/Column/Add?TableGuid=' + GetUrlParam("TableGuid"),
                    500, 800, bindGrid)
            },
            edit: function (index, row) {
                OpenTopDialog('columnedit', '编辑列', 'Frame/Column/Edit?RowGuid=' + row.RowGuid, 500, 800,
                    bindGrid)
            },
            batchDelete: function () {
                var selectRow = this.$refs.table.getSelectRow();
                if (selectRow.length == 0) {
                    OpenWaring('提示', '请选择删除的数据')
                } else {
                    OpenConfirm('提示', '确认删除选中的数据？', function () {
                        var KeyGuidList = "";
                        selectRow.forEach(element => {
                            KeyGuidList += element.RowGuid + ";";
                        });
                        var data = {
                            KeyGuidList: KeyGuidList
                        }
                        JsonAjaxPost(batchDeletetUrl, JSON.stringify(data), function (data,
                            status) {
                            if (data.code == 0) {
                                OpenSuccess('提示', '删除成功！', bindGrid)
                            } else {
                                OpenFail('提示', '删除失败！')
                            }
                        })
                    })
                }
            },
            batchCreateScript: function () {
                var selectRow = this.$refs.table.getSelectRow();
                if (selectRow.length == 0) {
                    OpenWaring('提示', '请选择生成脚本的列信息')
                } else {
                    var KeyGuidList = "";
                    selectRow.forEach(element => {
                        KeyGuidList += element.RowGuid + ";";
                    });
                    var data = {
                        KeyGuidList: KeyGuidList,
                        TableGuid: GetUrlParam("TableGuid"),
                    }
                    JsonAjaxPost(batchScripttUrl, JSON.stringify(data), function (result,
                        status) {
                        if (result.code == 0) {
                            OpenTopDialog('columnscript', '同步脚本', 'Frame/Column/Script', 500, 800,
                                bindGrid, result.Script)

                        } else {
                            OpenFail('提示', '删除失败！')
                        }
                    })
                }
            }
        }
    })

    function bindGrid() {
        var data = {
            PageIndex: pageData.pageIndex,
            PageSize: pageData.pageSize,
            TableGuid: GetUrlParam("TableGuid"),
            FieldName: pageData.fieldName
        }
        JsonAjaxPost(tableUrl, JSON.stringify(data), function (data, status) {
            Vue.set(pageData, "tableData", data.data);
            Vue.set(pageData, "total", data.total)
        })
    }
</script>